<template>
	<view>
		<view class="edgeInsetTop"></view>
		<view class="cu-form-group">
			<view class="title">姓名<text style="color: #f64949">*</text></view>
			<input type="text" :disabled="fs" placeholder="请输入姓名" v-model="form.data.姓名"></input>
		</view>
		<view class="cu-form-group">
			<view class="title">会员号(手机号)<text style="color: #f64949">*</text></view>
			<input type="text" :disabled="fs" placeholder="请输入会员号" v-model="form.data.会员号"></input>
		</view>
		<view class="cu-form-group">
			<view class="title">身份证号码<text style="color: #f64949">*</text></view>
			<input type="text" :disabled="fs" placeholder="请输入身份证号码" v-model="form.data.身份证号码" maxlength="18"></input>
		</view>
		<view class="cu-form-group">
			<view class="faren" style="padding: 36rpx 0">
				<text class="left-t faren_title">
					死亡证明
					<text style="color: #f64949">*</text>
				</text>
				<view class="faren_flex">
					<view class="faren_flex_item" v-if="form.data.死亡证明">
						<view class="choose_img" @tap="chooseImg($event, '死亡证明')">
							<image :src="form.data.死亡证明" class="choose_img_view" mode=""></image>
						</view>
						<u-icon name="close-circle-fill" class="close-circle-fill" @tap="closeImg(0, '死亡证明')" v-if="!fs"></u-icon>
					</view>
					<view class="faren_flex_item" v-else>
						<view class="choose_img" @tap="chooseImg($event, '死亡证明')">
							<image src="/static/images/user/xiangji.png" class="choose_img_icon" mode=""></image>
							<view class="choose_img_desc">点击拍照/上传</view>
						</view>
					</view>
				</view>
				<!-- <view class="faren_flex_right">可上传多图</view> -->
			</view>
		</view>
		<view class="cu-form-group">
			<view class="title">是否销户<text style="color: #f64949">*</text></view>
			<switch :disabled="fs" @change="switchChange($event,'是否销户')" :class="form.data.是否销户 == 1?'checked':''" :checked="form.data.是否销户 == 1"></switch>
		</view>
		<view class="cu-form-group" @click="openPicker($event, '死亡日期')">
			<view class="title">死亡日期<text style="color: #f64949">*</text></view>
			<input type="text" placeholder="请选择死亡日期" v-model="form.data.死亡日期" style="pointer-events:none" disabled></input>
		</view>
		<view class="cu-form-group">
			<view class="title">计算方式<text style="color: #f64949"></text></view>
			<span>总金额-已置换(提现)金额=余额/2.2=到手金额(<span style="color: #f64949;">如需交遗产税完税后方可提现</span>)</span>
		</view>
		<view class="syrjr">
			<view class="title title_" >受益人或家人信息<text style="color: #f64949">*</text></view>
			<view class="cu-form-group">
				<view class="title">姓名<text style="color: #f64949">*</text></view>
				<input type="text" :disabled="fs" placeholder="请输姓名" v-model="form.data.受益人.姓名"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">手机号<text style="color: #f64949">*</text></view>
				<input type="text" :disabled="fs" placeholder="请输入手机号" v-model="form.data.受益人.手机号" maxlength="11"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">身份证号码<text style="color: #f64949">*</text></view>
				<input type="text" :disabled="fs" placeholder="请输入身份证号码" v-model="form.data.受益人.身份证号码"  maxlength="18"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">与死者关系<text style="color: #f64949">*</text></view>
				<input type="text" :disabled="fs" placeholder="请输入与死者关系" v-model="form.data.受益人.与死者关系"></input>
			</view>
		</view>
		<view class="cu-form-group">
			<view class="faren" style="padding: 36rpx 0">
				<text class="left-t faren_title">
					身份证照片
					<text style="color: #f64949">*</text>
				</text>
				<view class="faren_flex">
					<view class="faren_flex_item" v-if="form.data.身份证照片">
						<view class="choose_img" @tap="chooseImg($event, '身份证照片')">
							<image :src="form.data.身份证照片" class="choose_img_view" mode=""></image>
						</view>
						<u-icon name="close-circle-fill" class="close-circle-fill" @tap="closeImg(0, '身份证照片')" v-if="!fs"></u-icon>
					</view>
					<view class="faren_flex_item" v-else>
						<view class="choose_img" @tap="chooseImg($event, '身份证照片')">
							<image src="/static/images/user/xiangji.png" class="choose_img_icon" mode=""></image>
							<view class="choose_img_desc">点击拍照/上传</view>
						</view>
					</view>
				</view>
				<!-- <view class="faren_flex_right">可上传多图</view> -->
			</view>
		</view>
		<view class="cu-form-group">
			<view class="faren" style="padding: 36rpx 0">
				<text class="left-t faren_title">
					遗嘱
					<!-- <text style="color: #f64949">*</text> -->
				</text>
				<view class="faren_flex">
					<view class="faren_flex_item" v-for="(item, index) in form.data.遗嘱">
						<view class="choose_img">
							<image :src="item" class="choose_img_view" mode=""></image>
						</view>
						<u-icon name="close-circle-fill" class="close-circle-fill" @tap="closeImg(index, '遗嘱')" v-if="!fs"></u-icon>
					</view>
					<view class="faren_flex_item" v-if="form.data.遗嘱.length < 4">
						<view class="choose_img" @tap="chooseImg($event, '遗嘱', 'p')">
							<image src="/static/images/user/xiangji.png" class="choose_img_icon" mode=""></image>
							<view class="choose_img_desc">点击拍照/上传</view>
						</view>
					</view>
				</view>
				<view class="faren_flex_right">可上传多图 最多<text style="color: #f64949">4</text>张</view>
			</view>
		</view>
		<view class="cu-form-group">
			<view class="faren" style="padding: 36rpx 0">
				<text class="left-t faren_title">
					户口簿
					<text style="color: #f64949">*</text>
				</text>
				<view class="faren_flex">
					<view class="faren_flex_item" v-for="(item, index) in form.data.户口簿">
						<view class="choose_img">
							<image :src="item" class="choose_img_view" mode=""></image>
						</view>
						<u-icon name="close-circle-fill" class="close-circle-fill" @tap="closeImg(index, '户口簿')" v-if="!fs"></u-icon>
					</view>
					<view class="faren_flex_item" v-if="form.data.户口簿.length < 8">
						<view class="choose_img" @tap="chooseImg($event, '户口簿', 'p')">
							<image src="/static/images/user/xiangji.png" class="choose_img_icon" mode=""></image>
							<view class="choose_img_desc">点击拍照/上传</view>
						</view>
					</view>
				</view>
				<view class="faren_flex_right">可上传多图 最多<text style="color: #f64949">8</text>张</view>
			</view>
		</view>
		<view class="cu-form-group">
			<view class="faren" style="padding: 36rpx 0">
				<text class="left-t faren_title">
					折现申请书
					<text style="color: #f64949">*</text>
				</text>
				<view class="faren_flex">
					<view class="faren_flex_item" v-if="form.data.折现申请书">
						<view class="choose_img" @tap="chooseImg($event, '折现申请书')">
							<image :src="form.data.折现申请书" class="choose_img_view" mode=""></image>
						</view>
						<u-icon name="close-circle-fill" class="close-circle-fill" @tap="closeImg(0, '折现申请书')" v-if="!fs"></u-icon>
					</view>
					<view class="faren_flex_item" v-else>
						<view class="choose_img" @tap="chooseImg($event, '折现申请书')">
							<image src="/static/images/user/xiangji.png" class="choose_img_icon" mode=""></image>
							<view class="choose_img_desc">点击拍照/上传</view>
						</view>
					</view>
				</view>
				<!-- <view class="faren_flex_right">可上传多图</view> -->
			</view>
		</view>
		<view class="syrjr">
			<view class="title title_" >收款账户信息<text style="color: #f64949">*</text></view>
			<view class="cu-form-group">
				<view class="title">收款账号<text style="color: #f64949">*</text></view>
				<input type="text" :disabled="fs" placeholder="请输收款账号" v-model="form.data.收款账户.收款账号"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">开户人姓名<text style="color: #f64949">*</text></view>
				<input type="text" :disabled="fs" placeholder="请输入开户人姓名" v-model="form.data.收款账户.开户人姓名"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">预留电话<text style="color: #f64949">*</text></view>
				<input type="text" :disabled="fs" placeholder="请输入预留电话" v-model="form.data.收款账户.预留电话"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">开户行<text style="color: #f64949">*</text></view>
				<input type="text" :disabled="fs" placeholder="请输入开户行" v-model="form.data.收款账户.开户行"></input>
			</view>
		</view>
		<view class="cu-form-group">
			<view class="title">总订单金额<text style="color: #f64949">*</text></view>
			<input disabled type="text" placeholder="请输入姓名" v-model="form.data.总订单金额"></input>
		</view>
		<view class="cu-form-group">
			<view class="title">已置换/已提现总金额<text style="color: #f64949">*</text></view>
			<input disabled type="text" placeholder="请输入姓名" v-model="form.data.已置换_已提现总金额"></input>
		</view>
		<view class="cu-form-group">
			<view class="title">结余金额<text style="color: #f64949">*</text></view>
			<input disabled type="text" placeholder="请输入姓名" v-model="form.data.结余金额"></input>
		</view>
		<view class="cu-form-group">
			<view class="title">到手金额<text style="color: #f64949">*</text></view>
			<input disabled type="text" v-model="form.data.到手金额"></input>
		</view>
		<view class="padding-bj flex flex-direction margin-top">
			<button :disabled="fs" @tap="confirm" class="cu-btn wanl-bg-orange lg">{{!fs?'申请':(form.status == 'created'?'审核中':'审核通过')}}</button>
		</view>
		<u-picker mode="time" v-model="showTimePicker" safe-area-inset-bottom @confirm="confirmDateTime"/>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pickerType: '',
				showTimePicker:false,
				form: {
					id: null,
					status: '',
					data : {
						姓名:'',
						会员号:'',
						身份证号码:'',
						死亡证明: '',
						是否销户: 0,
						死亡日期: '',
						受益人: {
							姓名:'',
							手机号:'',
							身份证号码:'',
							与死者关系:''
						},
						遗嘱:[],
						户口簿:[],
						折现申请书:'',
						身份证照片:'',
						收款账户: {
							收款账号: '',
							开户人姓名: '',
							预留电话: '',
							开户行: ''
						},
						总订单金额:"0.00",
						已置换_已提现总金额:"0.00",
						结余金额:"0.00",
						到手金额:"0.00"
					}
					
				}
			}
		},
		onShow() {
			this.getInfo();
		},
		// watch:{
		// 	form: {
		// 		handler(n, o) {
		// 			this.verification()
		// 		},
		// 		deep: true
		// 	}
		// },
		computed: {
			fs () {
				console.log (this.form);
				if (this.form.id) {
					if (this.form.status == 'created' || this.form.status == 'successed') return true;
					
				}
				return false;
			},
		},
		methods: {
			getInfo() {
				let that = this;
				that.$api.get({
					url: '/wanlshop/life_end/info',
					success: (res) => {
						console.log(res)
						if (res.code) {
							let data = res.data;
							if (data.id) {
								that.form = data;
							} else {
								for(let i in data.data) {
								if (that.form.data[i] !== undefined ) that.form.data[i] = data.data[i];
							}
							}
							
						} else {
							uni.showToast({
							  title: res.msg,
							  icon: 'none',
							  mask: true,
							  success: (res) => {},
							  fail: (res) => {},
							  complete: (res) => {},
							})
						}
					}
				});
			},
			verification() {
				if (this.fs) return
				const idCardRegex = /^(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)$/;
				const chinaMobilePhoneNumberRegex = /^1[3-9]\d{9}$/;
				let t = this;
				let data = t.form.data;
				if (data.姓名 === '') {
					uni.showToast({'title':'姓名不能为空','icon':'none'})
					return;
				}
				if (data.会员号 === '') {
					uni.showToast({'title':'会员号不能为空','icon':'none'})
					return;
				}
				if (data.身份证号码 === '') {
					uni.showToast({'title':'身份证号码不能为空','icon':'none'})
					return;
				}
				if (!idCardRegex.test(data.身份证号码)) {
					uni.showToast({'title':'身份证号码格式不正确','icon':'none'})
					return;
				}
				if (data.死亡证明 === '') {
					uni.showToast({'title':'请上传死亡证明','icon':'none'})
					return;
				}
				if (data.死亡日期 === '') {
					uni.showToast({'title':'请选择死亡日期','icon':'none'})
					return;
				}

				// 受益人信息检查
				let  受益人 = data.受益人;
				if (受益人.姓名 === '') {
					uni.showToast({'title':'受益人姓名不能为空','icon':'none'})
					return;
				}
				if (受益人.手机号 === '') {
					uni.showToast({'title':'受益人手机号不能为空','icon':'none'})
					return;
				}

				if (!chinaMobilePhoneNumberRegex.test(受益人.手机号)) {
					uni.showToast({'title':'受益人手机号格式不正确','icon':'none'})
					return;
				}

				if (受益人.身份证号码 === '') {
					uni.showToast({'title':'受益人身份证号码不能为空','icon':'none'})
					return;
				}
				if (!idCardRegex.test(受益人.身份证号码)) {
					uni.showToast({'title':'受益人身份证号码格式不正确','icon':'none'})
					return;
				}
				if (受益人.与死者关系 === '') {
					uni.showToast({'title':'与死者关系不能为空','icon':'none'})
					return;
				}

				if (data.户口簿.length === 0) {
					uni.showToast({'title':'请上传户口簿','icon':'none'})
					return;
				}

				if (data.折现申请书 === '') {
					uni.showToast({'title':'请上传折现申请书','icon':'none'})
					return;
				}
				if (data.身份证照片 === '') {
					uni.showToast({'title':'请上传身份证照片','icon':'none'})
					return;
				}
				

				// 收款账户信息
				let 收款账户 = data.收款账户;
				if (收款账户.收款账号 === '') {
					uni.showToast({'title':'请输入收款账号','icon':'none'})
					return;
				}
				if (收款账户.开户人姓名 === '') {
					uni.showToast({'title':'请输入开户人姓名','icon':'none'})
					return;
				}
				if (收款账户.预留电话 === '') {
					uni.showToast({'title':'请输入预留电话','icon':'none'})
					return;
				}
				if (!chinaMobilePhoneNumberRegex.test(收款账户.预留电话)) {
					uni.showToast({'title':'预留电话格式不正确','icon':'none'})
					return;
				}
				if (收款账户.开户行 === '') {
					uni.showToast({'title':'请输入开户行','icon':'none'})
					return;
				}

				return true;
			},
			switchChange(e,type) {
				this.form.data[type] = e.detail.value? 1: 0;
			},
			async chooseImg(e,type,n = 's',l = 1) {
				if (this.fs) return;
				// #ifdef APP-PLUS
				let result = await this.$store.dispatch("quanxian/requestPermissions",'WRITE_EXTERNAL_STORAGE')
				if (result !== 1) return
				this.$store.state.isCAMERA = true
				// #endif
					
				let t = this;
				uni.chooseImage({
					count: 1, //默认9
					success: (res) => {
						t.uploadImg(type, res.tempFilePaths[0],n);
					}
				});
			},
			uploadImg(type, path,n) {
				let that = this;
				// 上传图片
				that.$api.get({
					url: '/wanlshop/common/uploadData',
					success: (updata) => {
						that.$api.upload({
							url: updata.data.uploadurl,
							filePath: path,
							name: 'file',
							formData: updata.data.storage == 'local' ? null : updata.data.multipart,
							success: (res) => {
								let resinfo = JSON.parse(res);
								
								if (n == 's') {
									that.form.data[type] = resinfo.data.fullurl
								} else {
									that.form.data[type].push(resinfo.data.fullurl)
								}
							}
						});
					}
				});
			},
			closeImg(index, type) {
				if (this.fs) return;
				if (typeof this.form[type] == 'string') {
					this.form.data[type] = '';
				} else {
					this.form.data[type].splice(index, 1);
				}
			},
			confirm() {
				let that = this;
				if (that.verification()) {
					uni.showModal({
						title: '您确定要提交吗?', // 标题
						content: '审核通过后自动注销账户', // 内容
						showCancel: true, // 是否显示取消按钮，默认为true
						cancelText: '取消', // 取消按钮的文字，默认为"取消"
						confirmText: '确定', // 确定按钮的文字，默认为"确定"
						success(res) {
							if (res.confirm) {

								that.$api.post({
									url: '/wanlshop/life_end/apply',
									data: that.form,
									success: res => {
										if(res.code == 1) {

										} else {
											uni.showToast({
												title: res.msg,
												icon: 'none',
												mask: true,
												success: (res) => {},
												fail: (res) => {},
												complete: (res) => {},
											})
										}

										that.getInfo();
									}
								})
							} else if (res.cancel) {
								// 用户点击了取消按钮
								console.log('用户点击了取消');
							}
						}
					});
				}
			},
			openPicker(e, type) {
				this.pickerType = type;
				this.showTimePicker = true;
			},
			confirmDateTime(e) {
				let date = e.year + '-' + e.month + '-' + e.day
				this.form.data[this.pickerType] = date
			}
		}
	}
</script>


<style>
	.cu-form-group {
		padding: 0 25rpx;
	}
	/* 1.1.5升级 */
	.cu-form-group.area{
		position: relative;
	}
	.cu-form-group.area .click{
		position: absolute;
		z-index: 99;
		right: 0;
		left: 0;
		top: 0;
		bottom: 0;
	}
	.cu-form-group .title {
		min-width: calc(4em + 15px);
		font-size: 26rpx;
	}

	.cu-form-group input,
	.cu-form-group textarea {
		font-size: 26rpx;
	}

	.cu-btn.lg {
		font-size: 32rpx;
		height: 86rpx;
	}
	
	.faren_flex_right {
		font-size: 22rpx;
		font-family: Alibaba PuHuiTi 2-65 Medium, Alibaba PuHuiTi 20;
		font-weight: normal;
		color: #000000;
		margin-top: 20rpx;
	}
	
	
	
	
	.faren {
		width: 100%;
	}
	.faren_title {
		width: 100%;
	}
	.faren_flex {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.faren_flex_item {
		position: relative;
	}
	
	.choose_img_icon {
		width: 64rpx;
		height: 64rpx;
		display: block;
		margin: 0 auto;
		position: relative;
		top: 44rpx;
	}
	.choose_img {
		width: 290rpx;
		height: 194rpx;
		background: #eeeeee;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin-top: 20rpx;
	}
	.choose_img_view {
		width: 290rpx;
		height: 194rpx;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}
	.choose_img_desc {
		text-align: center;
		margin-top: 54rpx;
		font-size: 22rpx;
		font-family: Source Han Sans CN-Medium, Source Han Sans CN;
		font-weight: 500;
		color: #959595;
	}
	.close-circle-fill {
		font-size: 40rpx;
		position: absolute;
		top: 0;
		right: -20rpx;
		color: #fa360a;
	}
	.title_ {
		padding: 10px 0;
		line-height:20px;
		height: 40px;
		text-align: center;
		font-weight: bold;
	}
	.syrjr {
		/* background-color: ; */
	}
	.syrjr view {
		background-color:unset;
	}

	.mk {
		/* width: 100vw; */
		/* height: 100%; */
		flex: 1;
	}
</style>